<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="box_body">
    <table class="gridtable">
        <tr>
            <td>
                <span>姓名：</span>
            </td>
            <td>
                <input type="text" v-model="user.name" />
            </td>
        </tr>
        <tr>
            <td>
                <span>性别：</span>
            </td>
            <td>
                <input type="radio" name="sex" :checked="user.sex==1" id="man" value="1" v-model="user.sex"/>男
                <input type="radio" name="sex" :checked="user.sex==0" id="woman" value="0" v-model="user.sex" />女
            </td>
        </tr>
        <tr>
            <td>
                <span>生日</span>
            </td>
            <td>
                <input type="date" v-model="user.birth" >
            </td>
        </tr>
        <tr>
            <td  colspan="2">
                <button  style="width: 100%" type="button" value="修改" @click="editStu">修改</button>
            </td>
        </tr>
    </table>
</div>
</body>
<script>
    new Vue({
        el : "#box_body",
        data : {
            user:{}
        },
        filters: {
            formatTimer: function(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                return y + "-" + MM + "-" + d ;
            }
        },
        methods : {
            findOne:function() {
                var _this=this
                var id=localStorage.getItem("id")
                axios({
                    method:'get',
                    url:'/stu/findOne',
                    params:{
                        id:id
                    }
                }).then(res=>{
                    _this.user=res.data
                    _this.user.birth=_this.formatTime(_this.user.birth)
                })
            },
            formatTime: function(value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? "0" + MM : MM;
                let d = date.getDate();
                d = d < 10 ? "0" + d : d;
                return y + "-" + MM + "-" + d ;
            }
            ,
            editStu:function() {
                // alert(this.user.sex)
                // this.user.sex=
                axios({
                    method:'post',
                    url:'/stu/editStu',
                    data : this.user
                }).then(res=>{
                    if (res.data == "unPermission") {
                        location.href="/to/unPermission"
                        return
                    }
                    if (res.data=='success') {
                        location.href = "/to/toFindAll"
                    }

                })
            }
        },
        created : function() {
            // console.log(localStorage.getItem("id"))
            this.findOne()
        }
    })
</script>
</html>